<template>
  <div class="login-container">
    <el-form class="login-box" :model="loginForm" ref="loginForm">
      <h1>后台登录</h1>
      <el-form-item class="input-container">
        <input
          type="text"
          v-model="loginForm.username"
          onkeyup="this.value=this.value.replace(/[, ]/g,'')"
          @keyup.enter="login"
          required
        />
        <!-- <el-input type="text"></el-input> -->
        <label for="username">账户：</label><br />
        <span>请输入你的用户名</span>
        <img src="../assets/大眼睛.png" alt="" />
      </el-form-item>
      <el-form-item class="input-container">
        <input
          type="password"
          v-model="loginForm.password"
          onkeyup="this.value=this.value.replace(/^ +| +$/g,'')"
          @keyup.enter="login"
          required
        />
        <!-- <el-input type="text"></el-input> -->
        <label for="password">密码：</label><br />
        <span>请输入你的密码</span>
        <img src="../assets/捂眼睛.jpeg" alt="" />
      </el-form-item>
      <el-form-item class="btn-container">
        <el-button :plain="true" @click="login">登 录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  data () {
    return {
      loginForm: {
        username: 'admin',
        password: '123456'
      },
      token: ''
    }
  },
  methods: {
    ...mapMutations(['setToken']),
    async login () {
      // 用trim()清除左右2边空格判断用户名或密码是否为空
      if (this.loginForm.username.trim() === '' || this.loginForm.password.trim() === '') {
        console.log('用户名和密码不能为空')
        // 清空输入框内容
        this.loginForm.username = this.loginForm.password = ''
        return this.$message.error('用户名或密码不能为空')
      }
      const { data } = await this.$http.post('/login', this.loginForm)
      console.log(data.meta)
      if (data.meta.status !== 200) {
        console.log(data)
        return this.$message.error(data.meta.msg)
      } else {
        this.$message.success(data.meta.msg)
        console.log(data)
        // 将token保存到sessionStorage中，登录之后才能访问其他的api接口，sessionStorage中token只在网站打开期间生效
        window.sessionStorage.setItem('token', data.data.token)
        this.token = data.data.token
        this.$store.commit('setToken', data.data.token)
        // 编程式导航
        return this.$router.push('/home')
      }
    }
  },
  created() {
    // 页面加载时判断token值是否存在，存在则直接跳转到home页
    if(window.sessionStorage.getItem('token')) {
      return this.$router.push('/home')
    }
  }
}
</script>

<style lang="less" scoped>
* {
  box-sizing: border-box;
}
.login-container {
  // background-color:rgb(20, 119, 119);
  background: url("../assets/loginbg.png") no-repeat;
  background-size: cover;
  height: 100%;
  .login-box {
    width: 400px;
    height: 320px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    background-color: rgba(255, 255, 255, 0.8);
    align-items: center;
    /* alternate反向播放 infinite无限次数*/
    animation: wave 1.5s infinite linear alternate;
    @keyframes wave {
      0% {
        box-shadow: 0 0 6px rgb(210, 210, 210);
      }
      25% {
        box-shadow: 0 0 8px rgb(220, 220, 220);
      }
      50% {
        box-shadow: 0 0 10px rgb(230, 230, 230);
      }
      75% {
        box-shadow: 0 0 12px rgb(240, 240, 240);
      }
      100% {
        box-shadow: 0 0 14px rgb(255, 255, 255);
      }
    }
    h1 {
      margin-top: 30px;
      font-weight: 500;
      /* color: #FF5733; */
      color: rgb(90, 90, 90);
    }
    button[type="button"]{
      width: 100px;
      height: 35px;
      line-height: 8px;
      cursor: pointer;
      outline: none;
      border: none;
      color: #ddd;
      background-image: linear-gradient(to top, #4be9e9 0%, #794ead 100%);
      transition: all 0.2s ease-out;
      border-radius: 10px;
      font-size: 1.2em;
    }
    button[type="button"]:hover{
      box-shadow: 0 0 5px rgb(110, 176, 230);
      color: #eee;
    }
    .input-container {
      width: 80%;
      height: 60px;
      position: relative;
      box-sizing: border-box;
      margin-bottom: 15px;
      img {
        width: 130px;
        height: 130px;
        position: absolute;
        top: -280px;
        left: 30%;
        border-radius: 50%;
        z-index: -10;
        visibility: hidden;
        box-shadow: 0 0 8px gray;
      }
      input {
        width: 100%;
        height: 30px;
        outline: none;
        border: none;
        font-size: 1em;
        background-color: rgba(255, 255, 255, 0.1);
        border-bottom: 1px solid #999;
      }
      span {
        color: rgb(252, 72, 72);
        font-size: 0.8em;
        visibility: hidden;
        position: absolute;
        bottom: -25px;
      }
      /* :focus:invalid 意思是表单被选中并且值没有通过表单验证的*/
      input:focus:invalid ~ span{
        visibility: inherit;
      }
      input:focus:invalid + label{
        color:rgb(252, 72, 72);
      }
      input:focus:invalid + label::after{
        background-color: rgb(252, 72, 72);
      }
      input:focus + label::after,
      input:valid + label::after {
        bottom: -13px;
        /* forwards：保留动画最后一帧 */
        animation: moveStart .2s ease-in forwards;
      }
      @keyframes moveStart {
        0% {
          width: 0;
        }

        100% {
          width: 100%;
        }
      }

      input:focus + label,
      input:valid + label {
        top: -18px;
        color: royalblue;
        font-size: 12px;
      }

      input:focus ~ img,
      input:valid ~ img {
        visibility: visible;
      }

      label {
        width: 100%;
        height: 41px;
        font-size: 1.2em;
        color: #999;
        position: absolute;
        left: 0;
        transition: all 0.3s ease;
        pointer-events: none;
      }
      label::after {
        content: "";
        width: 0;
        height: 2px;
        background-color: royalblue;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 4px;
        animation: moveEnd .2s ease-out forwards;
      }
      @keyframes moveEnd {
        0% {
          width: 100%;
        }

        100% {
          width: 0;
        }
      }
    }
    .input-container:nth-of-type(1) {
      img {
        /* visibility: visible; */
        top: -205px;
      }
    }
  }
}
</style>
